<template>


  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="750px"
    @closed="closed"
    >


  <div class="form-drawer__content" style="height: 100%;">

  <div style="height: 280px;">
    <el-form ref="formData" :model="formData" :rules="rules" >
      <el-form-item label-width="80px" label="场景名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入场景名称" autocomplete="off" />
      </el-form-item>
      <el-form-item label-width="80px" label="场景封面" prop="imageUrl">
        <el-image
          style="width: 200px; height: 150px"
          :src="imageUrl"
          fit="fit"></el-image>
      </el-form-item>
    </el-form>
  </div>
  <div class="division" style="height: 100%;">

  <div style="height: 75px;">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="queryForm.keywords" placeholder="姓名/单位/手机号" style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
        <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top: -12px;">
      <el-table-column
        prop="name"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="单位"
        width="200"
        >
      </el-table-column>
      <el-table-column
        prop="limit"
        label="限制路数"
        width="200"
        >
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.limit" @change="handleChange(scope.row)" :min="0" :max="10"  style="width: 165px;"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态"
        width="90">
        <template slot-scope="scope">
          <el-switch
            @change="handleChange(scope.row)"
            v-model="scope.row.status"
            active-value='1'
            inactive-value='0'
            active-color="#169bd5"
            inactive-color="#7f7f7f">
          </el-switch>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right;padding-top: 0.3125rem;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.cur"
        :page-size="page.limit"
        :total="page.total"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, total, sizes">
      </el-pagination>
    </div>



  </div>


  </div>

  </el-drawer>
</template>




<script>
  import {
    findScenePerms,
    saveScenePerms
  } from '@/api/biz/scene'


  import {
    findUserList,
    saveUser,
    deleteUser
  } from '@/api/system/user'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'PermissionDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.name = value.data.name || ''
            this.formData.size = value.data.size || 0
            this.formData.remark = value.data.remark || ''
            this.formData.exeFilePath = value.data.exeFilePath || ''
            this.formData.version = value.data.version || '0.0'
            this.updateTime = value.data.updateTime || ''

            if(value.data.id){
              this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id
            }
          } else {
            this.formData.id =''
            this.formData.name = ''
            this.formData.size = 0
            this.formData.remark = ''
            this.formData.exeFilePath =''
            this.formData.version ='0.0'
            this.imageUrl=''
            this.updateTime =''
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'权限设置',
        loading:false,
        formData: {
          id: '',
          name: '',
          size:0,
          version:24,
          exeFilePath:'',
          remark: '',
          file:null
        },
        tableData: [],
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        updateTime:null,
        imageUrl: '',
        options:[],
        rules: {
        }
      }
    },
    created() {
      this.load()
    },
    methods:{
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.load()
      },
      load(){
        this.loading=true
        findScenePerms({
          cur: this.page.cur,
          limit: this.page.limit,
          sceneId: this.formData.id,
          keywords: this.queryForm.keywords,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result.list
            this.page.total = rsp.result.totalRow
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.limit = val
        this.load()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.cur = cur
        this.load()
      },
      handleChange(value) {
        console.log(value)
        this.loading = true
        saveScenePerms({
          orgId:value.orgId,
          sceneId:this.formData.id,
          limit:value.limit,
          status:value.status
        }).then(rsp => {
          if(200==rsp.code){
            this.$message({
              type: 'success',
              message:rsp.message
            })
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style scoped>

  .el-dialog__header {
      border-bottom: 1px solid #aaaaaa;
  }

  .el-dialog__body {
      padding: 0px 0px;
  }

  .el-dialog__footer {
      padding: 10px;
      padding-top: 10px;
      border-top: 1px solid #aaaaaa;
  }

  .division{
    padding: 10px;
    border-top: 1px solid #aaaaaa;
    margin-top: -36px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }


  /deep/ .el-table{
   height:  calc(100% - 95px)  !important;
  }
  /deep/.el-table__body-wrapper {
      overflow: hidden;
      overflow-y: auto;
      position: relative;
      height: calc(100% - 55px);
  }
</style>
